/**
 * 安全距离全局样式
 * 适配各种设备的安全区域
 */

/* 基础安全距离类 */
.safe-area-container {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 全屏容器 */
.safe-area-fullscreen {
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 带内边距的容器 */
.safe-area-with-padding {
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

/* 只处理顶部安全距离 */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* 只处理底部安全距离 */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 只处理左右安全距离 */
.safe-area-horizontal {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 固定顶部导航栏 */
.safe-area-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 固定底部按钮区域 */
.safe-area-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 固定底部按钮区域（带内边距） */
.safe-area-fixed-bottom-padded {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  padding: 20rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  padding-left: calc(20rpx + env(safe-area-inset-left));
  padding-right: calc(20rpx + env(safe-area-inset-right));
}

/* 底部间距（为固定按钮预留空间） */
.safe-area-bottom-spacer {
  height: calc(120rpx + env(safe-area-inset-bottom));
}

/* 状态栏高度 */
.status-bar-height {
  height: var(--status-bar-height, env(safe-area-inset-top));
}

/* 页面特定样式 */

/* 搜索页面 - 居中布局 */
.page-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f5f7ff, #ffffff);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 列表页面 */
.page-list {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f5f7ff, #ffffff);
  box-sizing: border-box;
  padding: 24rpx;
  padding-top: calc(env(safe-area-inset-top) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

/* 配置页面 */
.page-config {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f5f7ff, #ffffff);
  box-sizing: border-box;
  padding: 24rpx;
  padding-top: calc(env(safe-area-inset-top) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

/* 有底部操作按钮的配置页面 */
.page-config-with-bottom-action {
  height: 100vh;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f5f7ff, #ffffff);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 响应式安全距离 */
@media (max-width: 750rpx) {
  .safe-area-responsive {
    padding-left: calc(env(safe-area-inset-left) + 16rpx);
    padding-right: calc(env(safe-area-inset-right) + 16rpx);
  }
}

@media (min-width: 751rpx) {
  .safe-area-responsive {
    padding-left: calc(env(safe-area-inset-left) + 24rpx);
    padding-right: calc(env(safe-area-inset-right) + 24rpx);
  }
}

/* 调试用边框（开发时可用） */
.safe-area-debug {
  border: 2rpx solid red;
}

.safe-area-debug::before {
  content: 'Safe Area';
  position: absolute;
  top: env(safe-area-inset-top);
  left: env(safe-area-inset-left);
  background: red;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  z-index: 9999;
}

/* 兼容性处理 */
/* iOS */
@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area-ios .safe-area-container {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Android */
@supports not (padding-top: env(safe-area-inset-top)) {
  .safe-area-android .safe-area-container {
    padding-top: var(--status-bar-height, 44rpx);
  }
}

/* 工具类 */
.safe-top-0 { padding-top: env(safe-area-inset-top); }
.safe-bottom-0 { padding-bottom: env(safe-area-inset-bottom); }
.safe-left-0 { padding-left: env(safe-area-inset-left); }
.safe-right-0 { padding-right: env(safe-area-inset-right); }

.safe-top-xs { padding-top: calc(env(safe-area-inset-top) + 8rpx); }
.safe-top-sm { padding-top: calc(env(safe-area-inset-top) + 16rpx); }
.safe-top-md { padding-top: calc(env(safe-area-inset-top) + 24rpx); }
.safe-top-lg { padding-top: calc(env(safe-area-inset-top) + 32rpx); }
.safe-top-xl { padding-top: calc(env(safe-area-inset-top) + 48rpx); }

.safe-bottom-xs { padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx); }
.safe-bottom-sm { padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx); }
.safe-bottom-md { padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx); }
.safe-bottom-lg { padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx); }
.safe-bottom-xl { padding-bottom: calc(env(safe-area-inset-bottom) + 48rpx); }

.safe-x-xs {
  padding-left: calc(env(safe-area-inset-left) + 8rpx);
  padding-right: calc(env(safe-area-inset-right) + 8rpx);
}

.safe-x-sm {
  padding-left: calc(env(safe-area-inset-left) + 16rpx);
  padding-right: calc(env(safe-area-inset-right) + 16rpx);
}

.safe-x-md {
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

.safe-x-lg {
  padding-left: calc(env(safe-area-inset-left) + 32rpx);
  padding-right: calc(env(safe-area-inset-right) + 32rpx);
}

.safe-x-xl {
  padding-left: calc(env(safe-area-inset-left) + 48rpx);
  padding-right: calc(env(safe-area-inset-right) + 48rpx);
}
